<!--
 * @Descripttion: 课堂分析详情-其他内容-语言表达
 * @version: V1.0.0.1
 * @Author: zhaozhenzhuo
 * @Date: 2025-10-30 16:24:02
 * @LastEditors: zhaozhenzhuo
 * @LastEditTime: 2025-10-30 16:24:02
-->
<template>
	<div class="teaching-pros-and-cons-wrapper">
		<div class="module-title-wrapper">
			<p>语言表达</p>
			<img v-if="false" src="@/assets/images/lessonAnalysisDetails/text-edit-normal.png" />
		</div>
		<div class="detail">
			<div
				v-if="LLMScoreResult && LLMScoreResult.overall"
				v-html="LLMScoreResult.overall"
				class="overall"
			></div>
			<div
				v-if="LLMScoreResult && LLMScoreResult.scoreReason"
				v-html="LLMScoreResult.scoreReason"
				class="overall"
			></div>
			<p
				v-if="!LLMScoreResult || (!LLMScoreResult.overall && !LLMScoreResult.scoreReason)"
				class="overall"
			>
				本堂课未识别到语言表达。
			</p>
		</div>
	</div>
</template>

<script setup lang="ts">
import { marked } from 'marked';
import { nextTick, ref, watch } from 'vue';
import { getErrorMessage, getLLMScoreResultAPI } from '@/api/index';

const props = withDefaults(
	defineProps<{
		lessonCode: string;
	}>(),
	{
		lessonCode: ''
	}
);

watch(
	() => props.lessonCode,
	(val) => {
		if (val) {
			nextTick(() => {
				getLLMScoreResult();
			});
		}
	},
	{ immediate: true }
);

// 大语言模型评分结果
const LLMScoreResult = ref<{
	overall: string;
	scoreReason: string;
} | null>(null);
// 获取AI教学优缺点
const getLLMScoreResult = async () => {
	try {
		const data = await getLLMScoreResultAPI({
			businessCode: props.lessonCode,
			type: 3
		});

		if (data) {
			// 给部分词加上类名
			if (data && data.overall) {
				data.overall = await marked.parse(data.overall);
				data.overall = data.overall.replace(
					/总评：/,
					`<span style="color: #674fde;font-family: 'Alibaba-PuHuiTi-Medium';">总评：</span>`
				);
			}
			if (data && data.scoreReason) {
				data.scoreReason = await marked.parse(data.scoreReason);
				data.scoreReason = data.scoreReason.replace(
					/优点：/,
					`<span style="color: #674fde;font-family: 'Alibaba-PuHuiTi-Medium';">优点：</span>`
				);
				data.scoreReason = data.scoreReason.replace(
					/缺点：/,
					`<span style="color: #674fde;font-family: 'Alibaba-PuHuiTi-Medium';">缺点：</span>`
				);
			}
			LLMScoreResult.value = data || {};
		}
	} catch (err) {
		console.error(getErrorMessage(err));
	}
};
</script>

<style lang="scss" scoped>
.teaching-pros-and-cons-wrapper {
	margin-top: 1.6rem;

	.overall {
		line-height: $line-height-lg;

		:deep(p) {
			white-space: pre-line;
		}
	}
}
</style>
